<template>
  <a-modal
    title="消息详情"
    :visible="visible"
    :maskClosable="false"
    :keyboard="false"
    :width="600"
    :footer="null"
    @cancel="handleCancel"
  >
    <a-form :form="form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-form-item label="应用">
        <span>{{ appName }}</span>
      </a-form-item>
      <a-form-item label="接收者">
        <span>{{ toUserName }}</span>
      </a-form-item>
      <a-form-item label="时间">
        <span>{{ notificationTime }}</span>
      </a-form-item>
      <a-form-item label="消息标题">
        <span>{{ title }}</span>
      </a-form-item>
      <a-form-item label="消息内容">
        <span v-html="content"></span>
      </a-form-item>
      <a-form-item label="模板CODE">
        <span>{{ templateCode }}</span>
      </a-form-item>
      <a-form-item label="参数">
        <span>{{ parametersJson }}</span>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getSysMessage } from '@/api/messageCenter/message';
export default {
  name: 'MessageDetailModal',
  data() {
    return {
      visible: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 10 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 }
      },
      form: this.$form.createForm(this),
      appName: '',
      toUserName: '',
      notificationTime: '',
      title: '',
      content: '',
      templateCode: '',
      parametersJson: ''
    };
  },
  methods: {
    show(record) {
      this.visible = true;
      const { appName, content, notificationTime, title, templateCode, toUserName, parametersJson } = record;
      this.appName = appName;
      this.content = content;
      this.notificationTime = notificationTime;
      this.title = title;
      this.toUserName = toUserName;
      this.templateCode = templateCode;
      this.parametersJson = parametersJson;
    },

    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style></style>
